<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{php echo $title}</title>
<meta name="format-detection" content="telephone=no, address=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    {php echo register_jssdk(false);}
    <script src="{MODULE_URL}template/resources/js/jquery-2.1.1.min.js"></script>
    <link href="{MODULE_URL}template/resources/js/bootstrap.min.css" rel="stylesheet">
    <script src="{MODULE_URL}template/resources/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{MODULE_URL}template/resources/layui/css/layui.css" media="all">
    <script src="{MODULE_URL}template/resources/layui/layui.js"></script>
    <script src="{MODULE_URL}template/resources/js/webcommon.js"></script>
    <script src="{MODULE_URL}template/resources/js/fastclick.min.js"></script>
    <script language="javascript">
        $(function() {
            FastClick.attach(document.body);
        });
    </script>
</head>
<body>
<style>
    body{background:#EFEEF3;}
    .memberinfobox{padding: 15px;background: #FFF;color: #000000;margin-bottom: 10px;}
    .memberinfocard{font-size:30px;font-family: Arial;}
    .inputbox{font-size: 16px; background:#FFF;padding: 10px 15px;}
    .chargefeebox{color:#04BE02; line-height: 30px}
    .chargefeebox small{font-size: 10px;line-height: 30px}
    #chargefee{font-family: Arial;font-size: 24px;}
    .fastinput{margin: 20px 10px 10px 10px; text-align: center;}
    .fastinput ul li{ display: inline-block;width: 32%; padding: 10px;}
    .fastinput ul li a{display: block;border: 1px solid #04BE02;padding: 10px; background: #FFF;}
    .fastinput ul li.isselect a{background:#04BE02;color:#FFF;}
    .btnbox{padding: 10px;}
    .layui-btn-fluid{width: 100%;}
    .btnfooter{position: absolute;bottom: 0;left: 0;right: 0;text-align: center}
</style>
{if $operation=="display"}
<div class="memberinfobox">
    <div class="memberinfocard">{$member['wxcardno']}<span class="pull-right" onclick="closeWin()">&times;</span></div>
</div>
<div class="inputbox">充值金额：
    <span class="pull-right chargefeebox"><small>￥</small><b id="chargefee">0</b></span>
</div>
<div class="fastinput">
    <ul>
        <li num="50" ><a href="javascript:inputnum(50)">50元</a></li>
        <li num="100" ><a href="javascript:inputnum(100)">100元</a></li>
        <li num="200" ><a href="javascript:inputnum(200)">200元</a></li>
        <li num="500" ><a href="javascript:inputnum(500)">500元</a></li>
        <li num="1000" ><a href="javascript:inputnum(1000)">1000元</a></li>
        <li num="0" ><a href="javascript:inputnum(0)">其他</a></li>
    </ul>
</div>
<div class="btnbox">
    <button class="layui-btn layui-btn-lg layui-btn-fluid" onclick="createOrder()">确认充值</button>
</div>

<div class="btnbox btnfooter">
    <a href="{php echo $this->createmobileurl('membercard',array('op'=>'history'))}" class="layui-btn layui-btn-lg">充值记录</a>
</div>

<script language="javascript">
    layui.use(['layer', 'laypage', 'element','form'], function() {
        var layer = layui.layer
                , laypage = layui.laypage
                , element = layui.element
                , form = layui.form;
    });
    function inputnum(num){
        $(".fastinput li[num='"+num+"']").addClass("isselect").siblings().removeClass("isselect");
        if(num>0){
            $("#chargefee").text(num);
        }else{
            layer.prompt({
                formType: 0,
                value: '',
                maxlength:10,
                title: '请输入充值金额',
            }, function(value, index, elem){
                if(isNaN(parseInt(value))){
                    layer.msg('请输入数字');
                    return;
                }
                $("#chargefee").text(value);
                layer.close(index);
            });
        }
    }
var jsApiParameters,tradeOrderNo,pid;
function jsApiCall(){
    {if $cfg['isbank']}
    WeixinJSBridge.invoke('getBrandWCPayRequest',{
        "appId" : jsApiParameters['appId'],
        "timeStamp":jsApiParameters['timeStamp'],
        "nonceStr" : jsApiParameters['nonceStr'],
        "package" : jsApiParameters['package'],
        "signType" : "MD5",
        "paySign" : jsApiParameters['paySign']
    },function(res){
        if(res.err_msg == "get_brand_wcpay_request:ok" ) {
            var index2=layer.load(1, {shade: [0.1,'#fff']});
            $.post("{php echo $this->createmobileurl('membercard',array('op'=>'checkpay'))}",{pid:pid},function(result){
                layer.close(index2);
                var feeback=eval("("+result+")");
                if(feeback.success){
                    layer.msg("支付成功");
                    location.href="{php echo $this->createmobileurl('membercard',array('op'=>'detail'))}&pid="+pid;
                }else{
                    layer.msg(feeback.msg);
                    return;
                }
            });
        }
    });
    {else}
	wx.chooseWXPay({
		timestamp: jsApiParameters['timeStamp'], 
		nonceStr: jsApiParameters['nonceStr'], 
		package: jsApiParameters['package'],
		signType: "MD5",
		paySign: jsApiParameters['paySign'],
		success: function (res) {
            var index2=layer.load(1, {shade: [0.1,'#fff']});
            $.post("{php echo $this->createmobileurl('membercard',array('op'=>'checkpay'))}",{pid:pid},function(result){
                layer.close(index2);
                var feeback=eval("("+result+")");
                if(feeback.success){
                    layer.msg("支付成功");
                    location.href="{php echo $this->createmobileurl('membercard',array('op'=>'detail'))}&pid="+pid;
                }else{
                    layer.msg(feeback.msg);
                    return;
                }
            });
		},
		cancel: function () {
			location.reload();
		},
		error: function (e) {
			layer.msg("失败");
		}
	});
    {/if}
}
function createOrder(){
    var fee=parseFloat($("#chargefee").text());
    if(isNaN(fee) || fee<=0){
        layer.msg('充值金额错误，请重新输入');
        return;
    }
    var index2=layer.load(1, {shade: [0.1,'#fff']});
	$.post("{php echo $this->createmobileurl('membercard',array('op'=>'createorder','shopid'=>$shopid))}",{fee:fee},function(result){
		layer.close(index2);
        console.log(result);
		var feeback=eval("("+result+")");
		if(feeback.success){
			tradeOrderNo=feeback.out_trade_no;
			jsApiParameters=feeback.param;
            pid=feeback.pid;
			callpay();
		}else{
            layer.msg(feeback.msg);
			return;
		}
	});
}
function callpay(){
	if (typeof WeixinJSBridge == "undefined"){
		if( document.addEventListener ){
			document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
		}else if (document.attachEvent){
			document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
			document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
		}
	}else{
		jsApiCall();
	}
}
//---
</script>
{elseif $operation=="history"}
<style>
    .memberinfobox{padding: 10px; background:#009688;margin-bottom: 10px}
    .memberinfo{margin: 10px;  padding:10px;border-radius: 4px;background:rgba(255,255,255,0.6);color: #FFF}
    .color1{color:#FF5722;font-family:Arial;}
    ul{background: #FFF;}
    ul li{padding: 10px;border-bottom: 1px solid #CCC}
</style>
<div class="memberinfobox">
    <div class="memberinfo">
    <span class="pull-right text-center" onclick="location.href='{php echo $this->createmobileurl('membercard')}'">
        <p><i style="font-size:20px" class="fa fa-piggy-bank fa-2x"></i></p>
        充值
    </span>
        <p>卡号：{$member['wxcardno']}</p>
        <p>余额：<small>￥</small> <b class="color1">{php echo $this->_2money($cash)}</b></p>
    </div>
</div>
<table class="layui-table" lay-size="lg" lay-even lay-skin="nob">
    {loop $list $row}
    <tr onclick="location.href='{php echo $this->createmobileurl('membercard',array('op'=>'detail','pid'=>$row['id']))}'">
        <td style="width: 30%">{php echo date('m-d H:i',$row['createtime'])}</td>
        <td style="width: 30%">
            {if $row['usetype']==1}
            <span style="color:#5FB878">{php echo $this->_2money($row['cash'])}</span>
            {else}
            <span style="color:#FF5722">+{php echo $this->_2money($row['cash']+$row['gift'])}</span>
            {/if}
        </td>
        <td style="width: 40%" class="text-right">
            {if $row['usetype']==1}
            <span class="layui-badge layui-bg-green">花</span>
            {elseif $row['usetype']==0}
            <span class="layui-badge">充</span>
            {else}
            <span class="layui-badge layui-bg-orange">退</span>
            {/if}

            {if $row['status']==1}
            <span class="layui-badge layui-bg-green"><i class="fa fa-ok"></i></span>
            {else}
            <span class="layui-badge layui-bg-black"><i class="fa fa-remove"></i></span>
            {/if}
        </td>
    </tr>
    {/loop}
</table>
{elseif $operation=="detail"}
<style>
    .detailbox{margin-top: 20px;background: #FFF;padding: 10px;}
    h2{font-size: 14px; text-align: left; border-bottom: 1px solid #CCC;padding: 20px 5px; color: #666;margin-bottom: 10px;}
    ul li{padding: 5px;}
    .info li{color: #999}
    .btngroup{position:absolute;bottom:0;left:0;right: 0; text-align: center;padding: 10px; color: #000;background: #FFF;font-size: 16px;}
</style>
<div class="detailbox">
    <h2>支付金额 <span class="pull-right" style="color: #000; font-size: 18px; font-family:Arial;">￥{php echo $this->_2money($trade['cash'])}</span></h2>
    <ul class="info">
        <li>状态<span class="pull-right">{if $trade['status']==1}成功{else}<span style="color:#F60">失败</span>{/if}</span></li>
        <li>店铺<span class="pull-right">{if $shop}{$shop['companyname']}{else}自助{/if}</span></li>
        {if $row['usetype']==1}
        <li>消费<span class="pull-right">{php echo $this->_2money($trade['cash'])}</span></li>
        {elseif $row['usetype']==0}
        <li>充值<span class="pull-right">{php echo $this->_2money($trade['cash'])}</span></li>
        <li>赠送<span class="pull-right">{php echo $this->_2money($trade['gift'])}</span></li>
        {else}
        <li>退还<span class="pull-right">{php echo $this->_2money($trade['cash'])}</span></li>
        {/if}
        <li>系统单号<span class="pull-right">{$trade['out_trade_no']}</span></li>
        <li>时间<span class="pull-right">{php echo date('Y-m-d H:i',$trade['createtime'])}</span></li>
        <li>备注<span class="pull-right">{$trade['remark']}</span></li>
    </ul>
</div>
{if $trade['usetype']==0 && $trade['status']==0 && $trade['paytype']>-1 && $trade['paytype']<2}
<div class="detailbox">
    <ul>
        <li onclick="checkPay({$trade['id']})">检查<span class="pull-right" style="color: #999;"><span style="color: #F60">重新检查支付状态</span> <i class="fa fa-menu-right"></i></span></li>
    </ul>
</div>
<script>
    layui.use(['layer', 'laypage', 'element','form'], function() {
        var layer = layui.layer
                , laypage = layui.laypage
                , element = layui.element
                , form = layui.form;
    });
    function checkPay(ordersn){
        var index2=layer.load(1, {shade: [0.1,'#fff']});
        $.post("{php echo $this->createmobileurl('membercard',array('op'=>'checkpay'))}",{pid:ordersn},function(result){
            layer.close(index2);
            var feeback=eval("("+result+")");
            if(feeback.success){
                layer.msg("支付成功",function(){
                    location.reload();
                });
            }else{
                layer.msg(feeback.msg);
            }
        });
    }
</script>
{/if}
<div class="btngroup" onclick="history.back()">返回</div>
{/if}
<script language="javascript">
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
	WeixinJSBridge.call('hideOptionMenu');
	WeixinJSBridge.call('hideToolbar');
});
wx.ready(function(){
    wx.hideOptionMenu();
});
function closeWin(){
	wx.closeWindow();
}
</script> 
